<template>
  <view class="Me">
    <!-- 头部个人信息展示 -->
    <view class="meHeader" v-if="isLogin">
      <view class="meInfo">
        <image :src="userInfo.avatar" class="avatar"></image>
        <view class="introMe">
          <view class="name">Hi~ {{ userInfo.nickName }}</view>
          <view class="intro">{{ userInfo.introduce }}</view>
        </view>
      </view>
      <view class="meTab">
        <view
          class="tab-item"
          v-for="item in tabContent"
          :key="item.id"
          @click="handleSkipUserDetailInfo(item)"
        >
          <view class="count">{{ item.count }}</view>
          <view class="itemName">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="getAvatar" v-else>
      <button
        v-if="!userInfo.avatar.length"
        class="avatarBtn"
        open-type="chooseAvatar"
        @chooseavatar="handleChooseAvatar"
      >
        获取头像
      </button>
      <image v-else :src="userInfo.avatar" class="tempAvatar"></image>
      <input
        type="nickname"
        class="nickInput"
        placeholder="填写昵称（登录）"
        v-model="nickName"
        @blur="setUserNickName"
      />
    </view>

    <!-- 统计信息展示 -->
    <view class="infoCount">
      <view class="countHeader">
        <image src="../../static/icons/fans.png" class="fansIcon"></image>
        <view class="countTitle">我的统计</view>
      </view>
      <view class="countInfo">
        <view class="countItem" v-for="item in countContent" :key="item.id">
          <view class="countContent"
            >{{ item.content }}
            <text class="countText">（个）</text>
          </view>
          <view class="countCount">{{ item.count }}</view>
        </view>
      </view>
    </view>

    <!-- 底部操作跳转 -->
    <view class="meOpeartor">
      <van-cell is-link @click="skipToCompleteInfo">
        <view slot="title" class="titleBox">
          <image
            src="../../static/icons/meActive.png"
            class="operatorIcon"
          ></image>
          <view class="van-cell-text">完善信息（重要）</view>
        </view>
      </van-cell>
      <van-cell is-link @click="skipToMyMessage">
        <view slot="title" class="titleBox">
          <image
            src="../../static/icons/message.png"
            class="operatorIcon"
          ></image>
          <view class="van-cell-text">我的消息</view>
          <view class="notice"></view>
        </view>
      </van-cell>
      <van-cell is-link @click="handleSkipUserDetailInfo({ name: '我的关注' })">
        <view slot="title" class="titleBox">
          <image src="../../static/icons/love.png" class="operatorIcon"></image>
          <view class="van-cell-text">我的关注</view>
        </view>
      </van-cell>
      <van-cell is-link @click="handleSkipUserDetailInfo({ name: '我的收藏' })">
        <view slot="title" class="titleBox">
          <image
            src="../../static/icons/collectionActive.png"
            class="operatorIcon"
          ></image>
          <view class="van-cell-text">我的收藏</view>
        </view>
      </van-cell>
      <van-cell is-link @click="skipToCustomer">
        <view slot="title" class="titleBox">
          <image
            src="../../static/icons/notice.png"
            class="operatorIcon"
          ></image>
          <view class="van-cell-text">联系我们</view>
        </view>
      </van-cell>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Me",
  data() {
    return {
      isLogin: false,
      tabContent: [
        {
          id: 1,
          count: 0,
          name: "我的讨论",
        },
        {
          id: 2,
          count: 0,
          name: "我的队伍",
        },
        {
          id: 3,
          count: 0,
          name: "我的任务",
        },
      ],
      countContent: [
        {
          id: 1,
          content: "共拥有粉丝数",
          count: 0,
        },
        {
          id: 2,
          content: "共获赞",
          count: 0,
        },
      ],
      avatarUrl: "",
      nickName: "",
    };
  },
  computed: { ...mapState(["userInfo"]) },
  mounted() {
    if (this.userInfo.avatar.length && this.userInfo.nickName.length) {
      this.isLogin = true;
    }
    this.initShowData();
  },
  methods: {
    // 获取用户头像
    async handleChooseAvatar(e) {
      console.log(e.detail);
      const { avatarUrl } = e.detail;
      uni.showLoading({
        title: "上传中",
      });
      this.avatarUrl = avatarUrl;
      const fileName = "avatar/" + Math.floor(new Date().getTime() / 1000);
      const filePath = this.avatarUrl;
      try {
        await this.$store.dispatch("uploadAvatarFileToCloud", {
          fileName,
          filePath,
        });
      } catch (err) {
        console.log(err);
      }
      uni.hideLoading();
    },
    // 设置用户昵称
    async setUserNickName(e) {
      console.log(e.target.value);
      this.nickName = e.target.value;
      try {
        await this.$store.dispatch("uploadUserNickName", this.nickName);
        uni.showToast({
          title: "已修改",
          icon: "success",
          duration: 2000,
        });
      } catch (err) {
        console.log(err);
      }
    },

    // 跳转至完善信息页面
    skipToCompleteInfo() {
      if (!this.isLogin) {
        uni.showToast({
          title: "请先登录",
          icon: "error",
          duration: 1000,
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/CompleteInfo/CompleteInfo",
      });
    },

    // 跳转至信息页面
    handleSkipUserDetailInfo(item) {
      if (!this.isLogin) {
        uni.showToast({
          title: "请先登录",
          icon: "error",
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/UserInfoDetail/UserInfoDetail?title=${item.name}`,
      });
    },

    // 跳转至我的消息页面
    skipToMyMessage() {
      if (!this.isLogin) {
        uni.showToast({
          title: "请先完善信息",
          icon: "error",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/MyMessage/MyMessage",
      });
    },

    // 跳转至客服页面
    skipToCustomer() {
      uni.navigateTo({
        url: "/pages/Customer/Customer",
      });
    },

    // 初始化展示的数据
    initShowData() {
      this.tabContent[0].count = this.userInfo.discussion.length;
      this.tabContent[1].count = this.userInfo.myTeam.length;
      this.tabContent[2].count =
        this.userInfo.taskList.length + this.userInfo.teamTaskList.length;
      this.countContent[0].count = this.userInfo.fans.length;
      this.countContent[1].count = this.userInfo.liked;
    },
  },

  watch: {
    // 深度监听判断是否已经填写成功
    userInfo: {
      handler(newValue) {
        if (newValue.avatar.length && newValue.nickName.length) {
          this.isLogin = true;
        }
        this.initShowData();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.Me {
  width: 100vw;
  height: 100vh;
  .meHeader {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .meInfo {
      display: flex;
      align-items: center;
      .avatar {
        margin-left: 30rpx;
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
      }
      .introMe {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        .name {
          font-weight: 500;
          font-size: 40rpx;
        }
        .intro {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #aaa;
        }
      }
    }
  }
  .getAvatar {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20rpx;
    .tempAvatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }
    .avatarBtn {
      border: none;
      border-radius: 10rpx;
      background-color: #05a47d;
      color: #fff;
      font-size: 28rpx;
    }
  }
  .meTab {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 40rpx;
    .tab-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .count {
        font-weight: 700;
        margin-bottom: 10rpx;
        color: #05a47d;
      }
      .itemName {
        font-size: 26rpx;
      }
    }
  }
  .infoCount {
    padding: 20rpx;
    padding-left: 40rpx;
    background-color: #fff;
    margin-top: 10rpx;
    .countHeader {
      display: flex;
      margin-bottom: 10rpx;
      .fansIcon {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
    }
    .countTitle {
      font-weight: 500;
      font-size: 37rpx;
    }
    .countInfo {
      display: flex;
      .countItem {
        margin-right: 140rpx;
        font-size: 26rpx;
        .countText {
          color: #aaa;
        }
        .countCount {
          margin-top: 10rpx;
          font-weight: 700;
          font-size: 40rpx;
        }
      }
    }
  }
  .meOpeartor {
    margin-top: 10rpx;
    .operatorIcon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 15rpx;
    }
    .titleBox {
      position: relative;
      display: flex;
      align-items: center;
      .notice {
        position: absolute;
        width: 15rpx;
        height: 15rpx;
        border-radius: 50%;
        background-color: #f00;
        top: -5rpx;
        left: 40rpx;
      }
    }
  }
}
</style>
